<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
			#showCodeDiv{
				width: 300px;
				height: 300px;
				font-size: 80px;
				color: white;
				position: fixed;
				line-height: 300px;
				text-align: center;
				left: calc(50% - 100px);
				top:calc(50% - 100px);
				background-color: rgba(0, 0, 0, 0.6);
			};
		</style>
		<link rel="stylesheet" type="text/css" href="../01封装弹框/style.css"/>
		<script type="text/javascript" charset="utf-8" src="../01封装弹框/alert.js"></script>
	</head>
	<body>
<!-- 	<input type="text" name="username" id="username" value="" > -->
		<div id="showCodeDiv"></div>
		<script type="text/javascript">
/* 			var inputDom = document.querySelector("#username");
			var showCodeDiv = document.createElement('div');
			showCodeDiv.style.width = "300px";
			showCodeDiv.style.height = "300px";
			showCodeDiv.backgroundColor = "rgba(0,0,0,0.6)";
			showCodeDiv.style.position = "fixed";
			showCodeDiv.style.left = "calc(50% - 100px)"
			showCodeDiv.style.top = "calc(50% - 100px)"
			showCodeDiv.style.textAlign = "center";
			showCodeDiv.style.lineHeight = "300px";
			showCodeDiv.style.fontSize = "80px";
			document.body.appendChild(showCodeDiv);

			//键盘按下事件
			inputDom.onkeydown = function(event){
				console.log(event);
				showCodeDiv.innerHTML = event.key;
			}
			//键盘按下事件
			inputDom.onkeypress = function(){
				console.log(event);
			}
			//键盘抬起事件
			inputDom.inkeyup = function(){
				console.log(event);
			} */


			//打字小游戏
			var score = 0;
			function random(){
				var randomNum = 97 + parseInt(Math.random()*26);
				var randomStr = String.fromCharCode(randomNum);
				console.log(randomNum);
				console.log(randomStr);
				var ucStr = randomStr.toUpperCase();
				console.log(ucStr);
				var showCodeDiv = document.querySelector("#showCodeDiv");
				showCodeDiv.innerHTML = ucStr;
			}
			random();

			var body = document.body;
			body.onkeypress = function(){
				console.log(event);
				var keyCode = event.key.toUpperCase();
				var showCodeDiv = document.querySelector("#showCodeDiv");
				if(keyCode == showCodeDiv.innerHTML){
					score++;
					console.log("打字正确，得分为:"+score);
					random();
				};
			};

			var fn = function(){
				wtalert({
						title:"打字速度",
						content:"你每分钟能敲"+score*6+"个单词!",
						confirmFn:function(){
							score = 0;
							setTimeout(fn,10000);
						}
				});
			};
			setTimeout(fn,10000);

		</script>
	</body>
</html>